<script setup>
// props: ['currentIndex']
const props = defineProps(['currentIndex'])
const emits = defineEmits(['changeTabbar'])
    const tabbarList = [
        {icon: '&#xe651;', text: '首页', to: {path: '/home'}},
        {icon: '&#xe690;', text: '购物车', to: {path: '/cart'}},
        {icon: '&#xe655;', text: '订单', to: {path: '/order'}},
        {icon: '&#xe60b;', text: '我的', to: {path: '/my'}},
    ]
const handleClick=(index)=>{
    emits('changeTabbar',index)
}
</script>

<template>
  <!-- 底部tabbar -->
  <div class="tabbar">
        <div 
            class="tabbar_item"  
            :class="{'tabbar_item--active' :props.currentIndex==index}"
            v-for="item,index in tabbarList" :key="index"
            @click="handleClick(index)"
        >
            <RouterLink :to="item.to">
                <span class="iconfont" v-html="item.icon"></span>
                <span class="tabbar_title">{{item.text}}</span>
            </RouterLink>
        </div>
    </div>
   
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';

.tabbar {
    width: 100%;
    height: .49rem;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: .01rem solid $content_bgColor;
    display: flex;

    // .tabbar_item
    &_item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: $content_fontcolor;
            
        }
        //活动样式
        &--active {
            a {
                color: #1FA4FC;
            }
        }
    }
}
</style>